<template>
  <div class="jiemian">
    <div class="jiemian_l">
      <div>
        <div class="hot_head banxin">
          <div class="tanxin">
            <h3>热门推荐</h3>
            <ul>
              <li>华语</li>
              <li>流行</li>
              <li>摇滚</li>
              <li>民谣</li>
              <li>电子</li>
            </ul>
          </div>
          <div>更多-></div>
        </div>
        <div class="hot_bot banxin">
          <ul>
            <li v-for="(item, index) in ImgSiao" :key="index">
              <img :src="item.picUrl" alt="" />
              <p>{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="hot_head banxin">
          <div class="tanxin">
            <h3>新碟上架</h3>
          </div>
          <div>更多-></div>
        </div>
        <div class="xingdie banxin">
          <ul>
            <li v-for="(item, index) in XinDie" :key="index">
              <img :src="item.picUrl" alt="" />
              <p>{{ item.name }}</p>
              <p>{{ item.artist.name }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="bangdan">
          <div class="hot_head banxin">
            <div class="tanxin">
              <h3>榜单</h3>
            </div>
            <div>更多-></div>
          </div>
          <table>
            <tbody>
              <tr>
                <th v-for="(item, index) in BangDan" :key="index">
                  <img :src="item.coverImgUrl" alt="" />
                  <span>{{ item.name }}</span>
                </th>
              </tr>
              <tr v-for="(item, index) in BangDangequ" :key="index">
                <td>
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.name }}</span>
                </td>
                <td>
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.name }}</span>
                </td>
                <td>
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.name }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="jiemian_r">
      <div class="xiaodenglu">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <button @click="Gologin">用户登录</button>
      </div>
      <div class="geshou">
        <p class="topbu"><span>入驻歌手</span> <span>查看全部></span></p>
        <ul>
          <li>
            <img src="@/assets/images/ruzhu/01.jpg" alt="" />
            <div>
              <p>张惠妹aMEI</p>
              <p>台湾歌手张惠妹</p>
            </div>
          </li>
          <li>
            <img src="@/assets/images/ruzhu/02.jpg" alt="" />
            <div>
              <p>吴莫愁Momo</p>
              <p>《中国好声音》选手吴莫愁</p>
            </div>
          </li>
          <li>
            <img src="@/assets/images/ruzhu/03.jpg" alt="" />
            <div>
              <p>孙楠</p>
              <p>歌手孙楠 代表作《你快回来》《燃烧》</p>
            </div>
          </li>
          <li>
            <img src="@/assets/images/ruzhu/04.jpg" alt="" />
            <div>
              <p>麦田老狼</p>
              <p>歌手，音乐人。代表作《同桌的你》等。</p>
            </div>
          </li>
          <li>
            <img src="@/assets/images/ruzhu/05.jpg" alt="" />
            <div>
              <p>陈楚生</p>
              <p>唱作歌手</p>
            </div>
          </li>
        </ul>
        <div class="shenqing">申请成为网易云音乐人</div>
      </div>
      <br />
      <div class="zhubo">
        <p class="topbu">热门主播</p>
        <ul>
          <li>
            <img
              src="http://p1.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40"
              alt=""
            />
            <div>
              <p>陈立</p>
              <p>心理学家、美食家陈立教授</p>
            </div>
          </li>
          <li>
            <img
              src="http://p1.music.126.net/GgXkjCzeH4rqPCsrkBV1kg==/109951164843970584.jpg?param=40y40"
              alt=""
            />
            <div>
              <p>刘维-Julius</p>
              <p>歌手、播客节目《维维道来》主理人</p>
            </div>
          </li>
          <li>
            <img
              src="http://p1.music.126.net/JZRLszqLQ2edeCd07JoNRQ==/109951166943043252.jpg?param=40y40"
              alt=""
            />
            <div>
              <p>莫非定律MoreFeel</p>
              <p>男女双人全创作独立乐团</p>
            </div>
          </li>
          <li>
            <img
              src="http://p1.music.126.net/NHjNoFpLDEZ-3OR9h35z1w==/109951165825466770.jpg?param=40y40"
              alt=""
            />
            <div>
              <p>碎嘴许美达</p>
              <p>脱口秀网络红人</p>
            </div>
          </li>
          <li>
            <img
              src="http://p1.music.126.net/CpUdHPNvBvN7kebvL21TTA==/109951163676573083.jpg?param=40y40"
              alt=""
            />
            <div>
              <p>银临Rachel</p>
              <p></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { RemenApi, XindieApi, reqTopList, reqPlayList } from "@/request/api";
export default {
  data() {
    return {
      //小图数组
      ImgSiao: [],
      //新碟
      XinDie: [],
      //榜单头
      BangDan: [],
      //榜单id
      BangDaniD: [],
      //榜单歌曲
      BangDangequ: [],
    };
  },
  methods: {
    Gologin() {
      this.$store.commit("chageLogin", true);
      let Title = {
        content: "请先登录",
        lcon: "info",
      };
      this.$store.dispatch("AsyncToast", Title);
    },
  },
  created() {
    RemenApi().then((res) => {
      this.ImgSiao = res.data.result;
      console.log(this.ImgSiao);
    });
    XindieApi().then((res) => {
      this.XinDie = res.data.albums;
      console.log(res);
    });
    reqTopList().then((res) => {
      this.BangDan = res.data.list;
      this.BangDan = this.BangDan.slice(0, 3);
      this.BangDan.forEach((item) => {
        this.BangDaniD.push(item.id);
      });
      console.log(this.BangDan);
      console.log(this.BangDaniD);
    });
    reqPlayList({ id: "19723756" }).then((res) => {
      this.BangDangequ = res.data.songs;
      this.BangDangequ = this.BangDangequ.slice(0, 10);
      console.log(this.BangDangequ);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.jiemian {
  width: 984px;
  display: flex;
  .jiemian_l {
    width: 730px;
  }
  .jiemian_r {
    width: 254px;
  }
}
.hot_head {
  cursor: pointer;
  width: 730px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 20px;
  border-bottom: 1px solid #ccc;
  ul {
    padding-left: 15px;
    display: flex;
    li {
      text-align: center;
      padding: 0 15px;
      border-right: 1px solid #ccc;
    }
    div {
    }
  }
}
.xingdie {
  cursor: pointer;
  overflow: hidden;
  height: 200px;
}
.xingdie,
.hot_bot {
  cursor: pointer;
  margin-top: 20px;
  width: 730px;
  box-sizing: border-box;
  padding: 0 20px;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      height: 180px;
      margin-bottom: 40px;
      font-size: 14px;
      img {
        width: 140px;
        height: 140px;
        padding-right: 20px;
      }
      p {
        box-sizing: border-box;
        margin-top: 5px;
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: wrap;
      }
    }
  }
}
.bangdan {
  cursor: pointer;
  table {
    tbody {
      th {
        width: 320px;
        height: 100px;
        border: 1px solid #ccc;
        img {
          width: 80px;
        }
        span {
          margin-top: 0;
          margin-left: 20px;
        }
      }
      td {
        border: 1px solid #ccc;
        span {
          margin-left: 20px;
        }
      }
    }
  }
}
.jiemian_r {
  cursor: pointer;
  .xiaodenglu {
    width: 100%;
    height: 150px;
    background-color: #ccc;
    position: relative;
    p {
      padding: 20px;
    }
    button {
      position: absolute;
      width: 140px;
      height: 30px;
      margin-left: 50px;
      color: white;
      border: none;
      background-color: rgb(195, 17, 17);
    }
  }
  .geshou {
    .topbu {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      span {
        cursor: pointer;
        &:nth-of-type(2) {
          color: #ccc;
        }
      }
    }
    ul {
      li {
        width: 100%;
        display: flex;
        margin: 5px;

        img {
          width: 60px;
          height: 60px;
          background-size: cover;
        }
        p {
          width: 198px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 7px;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .shenqing {
      width: 80%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 10px auto;
      background-color: #ccc;
      border: 1px solid #ccc;
    }
  }
  .zhubo {
    margin-top: 20px;
    ul {
      li {
        width: 100%;
        display: flex;
        margin: 5px;
        img {
          width: 60px;
          height: 60px;
          background-size: cover;
        }
        p {
          width: 198px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 7px;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>